<template>
  <div id="app">
    <mt-header title="后台管理系统" >
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link >
      <mt-button icon="more" slot="right">

      </mt-button>
    </mt-header>
    <router-view margin="0 0 55px 0"></router-view>
    <mt-tabbar v-model="selected" >
      <mt-tab-item id="home">
        <img slot="icon" src="./assets/logo.png">
        外卖
      </mt-tab-item>
      <mt-tab-item id="vip">
        <img slot="icon" src="./assets/logo.png">
        订单
      </mt-tab-item>
      <mt-tab-item id="shopcart">
        <img slot="icon" src="./assets/logo.png">
        发现
      </mt-tab-item>
      <mt-tab-item id="search">
        <img slot="icon" src="./assets/logo.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return{
        selected:''
      }
  },
  watch:{
    selected:function(newv,oldv){

      this.$router.push({name:this.selected})
    }
  }
}
</script>

<style>
html{
  margin-bottom:58px;
}
body{
  padding:0;
  margin:0;
  margin-top: 40px;
  margin-bottom: 40px;
  height: 100%
}
#app{
  position: relative;
}
.mint-tabbar{
  position: fixed;
}
.mint-header{
  position: fixed;
  width:100%;
  z-index: 100;
  top: 0;

}
</style>
